import React, { Component } from 'react'

export default class test extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       name: 'test',
       mount: props.mount
    }
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('getDerivedStateFromProps', nextProps, prevState)
    // 输出：{mount: 2} {name: "test", mount: 2}
    // props更新之后输出： {mount: 3} {name: "change", mount: 2}
    console.log('componentWillMount')
    //根据nextProps和prevState计算出预期的状态改变，返回结果会被送给setState
    return {
      name: 'change',
      ...nextProps
    }
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate', prevProps, prevState)
    // props更新之后输出： {mount: 2} {name: "change", mount: 2}
    return 'hi'
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(`componentDidUpdate`, prevProps, prevState, snapshot)
    // props更新之后输出：{mount: 2} {name: "change", mount: 2} hi
  }
  render() {
    return (
      <div>
        {this.state.name}<br/>
        mount: {this.state.mount}
      </div>
    )
  }
}
